import { useEffect, useState } from 'react'
import { useKeyPress, useRequest } from 'ahooks'
import Mock from 'mockjs'
import './App.css'

function App() {
  const [counter, setCounter] = useState(0)
  useKeyPress('uparrow', () => {
    setCounter(s => s + 1)
  })
  useKeyPress('downarrow', () => {
    setCounter(s => s - 1)
  })
  // useEffect(() => {
  //   document.addEventListener('keydown', (e) => {
  //     // console.log(e);
  //     if (e.keyCode == 38) {
  //       /*hooks中的作用域，如果setCounter(counter + 1)，
  //       这个 counter 会沿着作用域找到上层也就是App函数中的 counter，
  //       在addEventListener中并没有counter，App中的counter的值一直都是0，
  //       所以按下上下键执行的永远是 0 +(-) 1，
  //       setState还支持函数改变状态，这样就能形成闭包，s 将 counter 保存在了闭包中*/ 
  //       setCounter(s => s + 1)
  //     } else if (e.keyCode == 40) {
  //       setCounter(s => s - 1)
  //     }
  //   })
  // }, [])

  return (
    <div className="App">
      <p>Try pressing the following</p>
      <div>1. Press ArrowUp by key to increase</div>
      <div>2. Press ArrowUp by keyCode to decrease</div>
      <div>
        counter: <span style={{ color: '#f00' }}>{ counter }</span>
      </div>
    </div>
  )
}
export default App